<template>
  <div class="carousel-wrapper">
    <div class="carousel" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <div class="inner">
        <dot-item
          :itemLen="itemLen"
          :currentIndex="currentIndex"
          :hasDot="hasDot"
          :dotBgColor="dotBgColor"
          @dotClick="dotClick"
        ></dot-item>
        <director-button dir="next" @dirClick="dirClick"></director-button>
        <director-button dir="prev" @dirClick="dirClick"></director-button>
        <!-- 子项图片 -->
        <car-item
          v-for="(item, index) of courouselImgData"
          :key="index"
          :index="index"
          :currentIndex="currentIndex"
          :courouselImgUrl="item.courouselImgUrl"
        >
        </car-item>
      </div>
    </div>
  </div>
</template>

<script>
import CarItem from "./Item.vue";
import DotItem from "./Dot.vue";
import DirectorButton from "./Director.vue";

export default {
  name: "MyCarousel",
  components: {
    CarItem,
    DotItem,
    DirectorButton,
  },
  props: {
    courouselImgData: Array,
    autoplay: {
      type: Boolean,
      default: true,
    },
    duration: {
      type: Number,
      default: 3000,
    },
    autoplayDir: {
      type: String,
      default: "prev",
    },
    initial: {
      type: Number,
      default: 4,
    },
    hasDot: {
      type: Boolean,
      default: true,
    },
    hasDirector: {
      type: Boolean,
      default: true,
    },
    dotBgColor: {
      type: String,
      default: "orange",
    },
  },
  data() {
    return {
      // 当前聚焦项
      currentIndex: this.initial,
      itemLen: 0,
      _t: null,
    };
  },
  methods: {
    mouseEnter() {
      this._clearInterval();
    },
    mouseLeave() {
      this.autoPlay();
    },
    //实现点击prev/next按钮显示前一张或后一张图片
    dirClick(dir) {
      this.setIndex(dir);
    },
    //指示器的函数
    dotClick(index) {
      //实现轮播图小圆点联动
      this.currentIndex = index;
    },
    //自动轮播图实现
    autoPlay() {
      this._t = null;

      if (this.autoplay) {
        this._t = setInterval(() => {
          //问题1：到达第5张图/第1张图需要做什么操作？
          //问题2：方向

          //这里是设置自动轮播时是向前还是向后
          this.setIndex(this.autoplayDir);
          // console.log(this.currentIndex);
        }, this.duration);
      }
    },
    //更改currentIndex下标来显示指定图片
    setIndex(dir) {
      switch (dir) {
        case "next":
          //下一张图时下标currentIndex + 1
          this.currentIndex += 1;
          //itemLen -> v-for遍历子组件每一项item的长度
          //说明到达了最后一张图
          if (this.currentIndex === this.itemLen) {
            //回归第一张
            this.currentIndex = 0;
          }
          break;
        case "prev":
          this.currentIndex -= 1;

          //说明到达了第一张
          //注意：这里不能写state.currentIndex === 0
          //因为：0需要显示出来，可以写为-1
          if (this.currentIndex === -1) {
            //回归最后一张
            this.currentIndex = this.itemLen - 1;
          }
          break;
        default:
          break;
      }
    },
    _clearInterval() {
      clearInterval(this._t);
      this._t = null;
    },
  },
  mounted() {
    this.itemLen = this.courouselImgData.length;

    this.autoPlay();
  },
  beforeDestory() {
    console.log("beforeDestory");
    this._clearInterval();
  },
};
</script>

<style lang="scss" scoped>
.carousel-wrapper {
  width: 800px;
  height: 280px;
  // margin: 80px auto;

  .carousel {
    width: 100%;
    height: 100%;

    .inner {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
